<template>
  <a-collapse v-model:activeKey="activeKey" :bordered="true" v-if="mcpInfo">
    <template #expandIcon="{ isActive }">
      <caret-right-outlined :rotate="isActive ? 90 : 0" />
    </template>
    <a-collapse-panel
      :key="index"
      :style="customStyle"
      v-for="(item, index) in mcpToolsList"
    >
      <template #header>
        <a-row>
          <a-col :span="20">
            <div>
              <span class="font-bold mr-[6px]">{{ item.name }}</span>
              <!-- <span> - </span> -->
              <div class="w-[50vw] whitespace-nowrap overflow-hidden truncate">
                {{ item.description }}
              </div>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="w-full h-full flex justify-end items-center" @click.stop>
              <a-switch v-model:checked="checked" />
            </div>
          </a-col>
        </a-row>
      </template>
      <h3>输入模式</h3>
      <p>
        <a-descriptions bordered size="small">
          <a-descriptions-item
            :span="3"
            v-for="(propItem, key) in item.args_schema.properties"
          >
            <template v-slot:label>
              <span>{{ key }}</span>
              <span class="text-[red]">{{
                item.args_schema.required.includes(key) ? '*' : ''
              }}</span>
            </template>
            <div>
              <template v-for="typeConfig in typeConfigs">
                <a-badge
                  :key="typeConfig.type"
                  :color="typeConfig.color"
                  :text="typeConfig.type"
                  v-if="propItem.type === typeConfig.type"
                />
              </template>
            </div>
            <div>{{ propItem.description }}</div>
            <div v-if="propItem.enum">
              <div>Allowed values:</div>
              <div>
                <a-tag v-for="(item, index) in propItem.enum" :key="index">{{
                  item
                }}</a-tag>
              </div>
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </p>
    </a-collapse-panel>
  </a-collapse>
</template>
<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { CaretRightOutlined } from '@ant-design/icons-vue';
  import { McpType } from '@/types/tools';
  const props = defineProps<{
    mcpInfo: McpType;
  }>();
  const mcpToolsList = computed(() => {
    console.log('mcpToolsList', props.mcpInfo?.tools);
    return props.mcpInfo?.tools || [];
  });
  const checked = ref<boolean>(false);
  const typeConfigs = ref<any>([
    { type: 'array', color: 'cyan' },
    { type: 'boolean', color: 'purple' },
    { type: 'string', color: 'blue' },
    { type: 'number', color: 'green' },
    { type: 'object', color: 'orange' },
  ]);
  const activeKey = ref([]);
  const customStyle = 'background: #f7f7f7;margin-bottom:4px;overflow: hidden';
</script>
<style scoped>
  .desc-truncate {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
  }
</style>
